.win-modal-wrap {
    width: 100vw;
    height: 100vh;
    @include flex-center-center();

    .win-modal {
        width: 90%;
        padding: 14rem 3rem 0;
        background: url("../images/celebrate.png");
        background-size: 100% auto;
        background-repeat: no-repeat;

        &.fail-modal {
            background: url("../images/fail.png");
            background-size: 100% auto;
            background-repeat: no-repeat;
        }

        .inner-box {
            position: relative;
            border-radius: 5rem;
            padding: 1.4rem;
            border-bottom: 1.6rem solid #c14ec9;
            background: linear-gradient(to bottom, #c38aff, #f08ff6);

            .head-box {
                position: absolute;
                top: -5rem;
                right: 0;
                left: 0;
                height: 8rem;
                @include flex-center-center();

                img {
                    width: auto;
                    height: 100%;
                }
            }

            .content-box {
                padding: 3rem 2rem 2rem;
                border-radius: 4rem;
                background-color: #fff;

                .grade-value {
                    @include flex-center-start();
                    width: 100%;
                    height: 4rem;
                    color: $purpleFontTwo;

                    .img-icon {
                        width: 3rem;
                        height: 3rem;
                    }

                    .grade-box {
                        width: 0;
                        flex: 1;
                        margin-left: .2rem;

                        .level {
                            height: 2rem;
                            line-height: 2rem;
                            text-align: left;

                            .grade {
                                font-size: 1.4rem;
                                font-weight: bold;

                            }

                            .exp {
                                margin-left: .4rem;
                                font-size: 1rem;
                                color: $purpleFontOne;
                            }

                            .exp-value {
                                margin-left: 1rem;
                                font-size: 1rem;
                                color: #FFB676;
                            }
                        }

                        .progress {
                            position: relative;
                            margin-top: .2rem;
                            width: 100%;
                            height: 1rem;
                            border-radius: .5rem;
                            box-sizing: border-box;
                            border: 1px solid #a26def;
                            background-color: #b09ec4;

                            // box-shadow:  inset 1px 1px 4px 0 rgba(0,0,0,.8);
                            .progress-num {
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                left: 0;
                                border-radius: .5rem;
                                background: url("../images/progress_bg.png");
                                background-size: auto 100%;
                                background-repeat: repeat-x;
                            }
                        }
                    }
                }

                .pk-player-box {
                    margin-top: 1rem;
                    @include flex-center-between();
                    background: url("../images/pk_img.png");
                    background-size: auto 100%;
                    background-repeat: no-repeat;
                    background-position: center center;

                    .game-player {
                        @include flex-center-center();
                        flex-direction: column;
                        margin-top: .4rem;

                        .player-photo {
                            @include flex-center-center();
                            width: 7rem;
                            height: 7rem;
                            border: 2px solid #9363d5;
                            border-radius: 1.6rem;
                            overflow: hidden;
                            background: radial-gradient(circle at center, #f5eeff, #d8c7f1);

                            &.enemy-photo {
                                border: 2px solid #7f420e;
                            }

                            .word {
                                font-size: 1.2rem;
                                color: $purpleFontOne;
                            }

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .name {
                            height: 3rem;
                            line-height: 3rem;
                            font-size: 1.2rem;
                            font-weight: bold;
                            color: $grayOne;
                        }
                    }
                }

                .prize-box {
                    margin-top: 1rem;
                    padding: 1rem;
                    border-radius: 1.4rem;
                    background-color: #a77fe3;
                    border: 1px solid #643e9d;
                    box-shadow: inset 0 .2rem .4rem 0 rgba(0, 0, 0, .8);

                    .hd {
                        height: 3rem;
                        line-height: 3rem;
                        font-size: 2rem;
                        font-weight: bold;
                        text-align: center;
                        background-image: linear-gradient(to bottom, #ffe6a4 49%, #ffd34b 50%);
                        -webkit-background-clip: text;
                        background-clip: text;
                        color: transparent;
                    }

                    .bd {
                        @include flex-center-between();

                        .item {
                            flex: 1;
                            @include flex-center-center();
                            flex-direction: column;

                            &:nth-child(2) {
                                border-left: 1px solid #e1cdff;
                                border-right: 1px solid #e1cdff;
                            }

                            img {
                                width: 3rem;
                                height: 3rem;
                            }

                            .val {
                                font-size: 1.2rem;
                                color: #fff;
                            }
                        }
                    }
                }

                .btns-box {
                    margin-top: 1rem;
                    @include flex-center-around();

                    .btn {
                        @include flex-center-center();
                        flex-direction: column;
                        width: 15rem;
                        height: 5rem;
                        background: url("../images/home_btn_2.png");
                        background-size: 100% 100%;
                        background-repeat: no-repeat;

                        &.goto-home {
                            background: url("../images/btn_1.png");
                            background-size: 100% 100%;
                            background-repeat: no-repeat;

                            .title {
                                color: #f8f3ff;
                                text-shadow: 0 2px 2px #9261D8;
                            }
                        }

                        .title {
                            font-size: 1.6rem;
                            font-weight: bold;
                            color: #FFF0E2;
                            text-shadow: 0 2px 2px #a84f01;
                        }

                        .remaining {
                            font-size: .8rem;
                            color: #904300;
                        }
                    }
                }
            }
        }
    }



}